<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>进程管理</title>
  <link rel="stylesheet" href="css/style.css">
  <!-- Vue 3 & Element Plus -->
  <script src="./public/vue.global.prod.js"></script>
  <!-- 引入 Element Plus -->
  <link rel="stylesheet" href="./public/element-plus-index.css">
  <script src="./public/index.full.js"></script>
  <link rel="stylesheet" href="./public/icon.css" />
  <!-- ECharts -->
  <script src="./public/echarts.min.js"></script>
  <script src="./public/axios.min.js"></script>
  <style>
  

    .breadcrumb {
      color: #666;
      /* margin-bottom: 18px; */
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 30px;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="container">
      <!-- 顶部导航 -->
      <div class="breadcrumb">首页 / 进程管理</div>
      <!-- 标签页 -->
      <el-tabs v-model="activeTab">
        <el-tab-pane label="运行中" name="running"></el-tab-pane>
        <el-tab-pane label="已结束" name="finished"></el-tab-pane>
      </el-tabs>
      <!-- 查询表单 -->
      <el-form :inline="true" style="margin: 16px 0;">
        <el-form-item label="应用名称">
          <el-input v-model="filters.appName" clearable placeholder="请输入应用名称" />
        </el-form-item>
        <el-form-item label="服务器IP">
          <el-input v-model="filters.serverIp" clearable placeholder="请输入服务器Ip" />
        </el-form-item>
        <el-form-item label="客户端分区">
          <el-input v-model="filters.clientZone" clearable placeholder="请输入客户端凭证" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- 批量终止按钮 -->
      <el-button type="primary" @click="onBatchStop" style="margin-bottom: 10px;">批量终止</el-button>
      <!-- 表格 -->
      <el-table :data="pagedData" border style="width: 100%;" @selection-change="onSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="appName" label="应用名称"></el-table-column>
        <el-table-column prop="serverIp" label="服务器"></el-table-column>
        <el-table-column prop="clientIp" label="客户端Ip"></el-table-column>
        <el-table-column prop="appType" label="应用类型"></el-table-column>
        <el-table-column prop="startTime" label="开始时间"></el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button type="danger" size="small" @click="onStop(scope.row)">终止</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination background layout="total, sizes, prev, pager, next" :total="tableData.length" :page-size="pageSize"
        :page-sizes="[5, 10, 20, 50]" :current-page="page" @current-change="handlePageChange" size="small"  hide-on-single-page="true"
        @size-change="handleSizeChange" />
    </div>
  </div>
  <script>
    const { createApp, ref, computed } = Vue
    createApp({
      setup () {
        const activeTab = ref('running')
        const filters = ref({
          appName: '',
          serverIp: '',
          clientZone: ''
        })
        // 原始数据
        const allData = ref([
          {
            appName: '下档口新',
            serverIp: '192.168.1.109',
            clientIp: '123.125.12.146',
            appType: 'SR(共享-平行云通用方案)',
            startTime: '2025-06-03 15:31:15',
            sessionId: 'cba85d03bffe43418e70e6b1eca4bcc2'
          },
        ])
        // 当前表格数据
        const tableData = ref([...allData.value])
        const selectedRows = ref([])
        const page = ref(1)
        const pageSize = ref(10)
        const pagedData = computed(() => {
          const start = (page.value - 1) * pageSize.value
          return tableData.value.slice(start, start + pageSize.value)
        })
        function handlePageChange (val) {
          page.value = val
        }
        function handleSizeChange (val) {
          pageSize.value = val
          page.value = 1
        }

        // 查询功能
        const onSearch = () => {
          tableData.value = allData.value.filter(item => {
            return (!filters.value.appName || item.appName.includes(filters.value.appName)) &&
              (!filters.value.serverIp || item.serverIp.includes(filters.value.serverIp)) &&
              (!filters.value.clientZone || item.clientIp.includes(filters.value.clientZone))
          })
        }

        // 批量终止功能
        const onBatchStop = () => {
          if (selectedRows.value.length === 0) {
            ElementPlus.ElMessage.warning('请先选择要终止的进程')
            return
          }
          ElementPlus.ElMessageBox.confirm('确定要批量终止选中的进程吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            // 并发请求
            const requests = selectedRows.value.map(row =>
              axios.delete(`/virtualHostMsg/${row.sessionId}`)
            )
            Promise.all(requests)
              .then(responses => {
                // 检查是否全部成功
                const allSuccess = responses.every(res => res.data.code === 1)
                if (allSuccess) {
                  const selectedSet = new Set(selectedRows.value.map(row => row.startTime + row.appName))
                  allData.value = allData.value.filter(item => !selectedSet.has(item.startTime + item.appName))
                  tableData.value = tableData.value.filter(item => !selectedSet.has(item.startTime + item.appName))
                  selectedRows.value = []
                  ElementPlus.ElMessage.success('批量终止成功')
                } else {
                  ElementPlus.ElMessage.error('部分进程终止失败')
                }
              })
              .catch(() => {
                ElementPlus.ElMessage.error('接口请求失败')
              })
          })
        }

        // 单个终止功能
        const onStop = (row) => {
          ElementPlus.ElMessageBox.confirm(`确定要终止【${row.appName}】吗？`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            axios.delete(`/virtualHostMsg/${row.sessionId}`)
              .then(res => {
                if (res.data.code === 1) {
                  allData.value = allData.value.filter(item => !(item.appName === row.appName && item.startTime === row.startTime))
                  tableData.value = tableData.value.filter(item => !(item.appName === row.appName && item.startTime === row.startTime))
                  ElementPlus.ElMessage.success('终止成功')
                } else {
                  ElementPlus.ElMessage.error(res.data.msg || '终止失败')
                }
              })
              .catch(() => {
                ElementPlus.ElMessage.error('接口请求失败')
              })
          })
        }

        const onSelectionChange = (rows) => {
          selectedRows.value = rows
        }

        return {
          activeTab,
          filters,
          tableData,
          onSearch,
          onBatchStop,
          onStop,
          onSelectionChange,
          page,
          pageSize,
          pagedData,
          handlePageChange,
          handleSizeChange,
        }
      }
    }).use(ElementPlus).mount('#app');
  </script>
</body>

</html>